<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="审核资质"
      width="550"
      :before-close="handleClose"
      :close-on-press-escape="false"
    >
      <el-form
        :model="formData"
        label-width="auto"
        style="width: 500px"
        ref="formDataRef"
      >
        <el-form-item label="企业名称：" prop="companyName">
          <el-input
            v-model="formData.businessName"
            placeholder="请输入企业名称"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          label="企业住所："
          prop="companyLocation"
        >
          <el-input
            v-model="formData.businessLocation"
            placeholder="请输入企业住所"
          />
        </el-form-item>
        <el-form-item
          label="社会信用代码："
          prop="companyNumber"
        >
          <el-input
            v-model="formData.businessNumber"
            placeholder="请输入社会信用代码"
          />
        </el-form-item>
        <el-form-item label="法人姓名：" prop="ownerName">
          <el-input
            v-model="formData.ownerName"
            placeholder="请输入法人姓名"
          />
        </el-form-item>
        <el-form-item
          label="法人联系方式："
          prop="ownerContact"
        >
          <el-input
            v-model="formData.ownerContact"
            placeholder="请输入联系方式"
          />
        </el-form-item>
        <el-form-item
          label="法人身份证件类型："
          prop="ownerIdType"
        >
          <el-select
            v-model="formData.ownerIdType"
            placeholder="请选择法人身份证件类型"
            clearable
          >
            <el-option
              v-for="(item, index) in idTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="法人身份证件号码："
          prop="ownerIdNumber"
        >
          <el-input
            v-model="formData.ownerIdNumber"
            placeholder="请输入法人身份证件号码"
          />
        </el-form-item>

        <el-form-item label="法人身份证人像面：">
          <n-image
            width="250"
            :src="formData.ownerIdHeadUrl"
            :fallback-src="imageFalse"
          ></n-image>
        </el-form-item>

        <el-form-item label="法人身份证国徽面：">
          <n-image
            width="250"
            :src="formData.ownerIdTailUrl"
          ></n-image>
        </el-form-item>

        <el-form-item label="营业执照：">
          <n-image
            width="250"
            :src="formData.businessCertificateUrl"
          ></n-image>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="danger"
            @click="handleExamine(0)"
          >
            审核不通过
          </el-button>
          <el-button
            type="primary"
            @click="handleExamine(1)"
          >
            审核通过
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { updateQualificationStatus } from '@/api/entryqualification.js'
import { ElMessage } from 'element-plus'

import imageFalse from '@/assets/img/imageFalse.jpg'

const emits = defineEmits(['refreshTable'])

const dialogVisible = ref(false)

const handleOpen = () => {
  dialogVisible.value = true
}

// 关闭弹窗并清空表单
const handleClose = () => {
  dialogVisible.value = false
  formData.value = {
    id: null,
    type: '',
    businessName: '',
    businessLocation: '',
    businessNumber: '',
    ownerName: '',
    ownerContact: '',
    ownerIdType: '',
    ownerIdNumber: '',
    reviewStatus: '',
    createTime: null,
    updateTime: null,
  }
}

// 身份证件类型
const idTypeOptions = [
  { label: '居民身份证', value: '居民身份证' },
  { label: '护照', value: '护照' },
  {
    label: '港澳居民来往内地通行证',
    value: '港澳居民来往内地通行证',
  },
  {
    label: '台湾居民来往大陆通行证',
    value: '台湾居民来往大陆通行证',
  },
  {
    label: '外国人永久居留身份证',
    value: '外国人永久居留身份证',
  },
  { label: '其他', value: '其他' },
]

// 表单数据
const formData = ref({
  id: null,
  type: '',
  businessName: '',
  businessLocation: '',
  businessNumber: '',
  ownerName: '',
  ownerContact: '',
  ownerIdType: '',
  ownerIdNumber: '',
  reviewStatus: '',
  createTime: null,
  updateTime: null,
})

// 审核
const handleExamine = async (type) => {
  try {
    // 根据参数判断是通过还是未通过操作
    let reviewStatus = type === 1 ? '通过' : '未通过'
    // formData.value.reviewStatus = '通过'
    // 构建传递的数据
    const data = {
      id: formData.value.id,
      reviewStatus,
    }
    // 调用审核借口
    await updateQualificationStatus(data)
    ElMessage.success('操作成功')
    emits('refreshTable')
    // 关闭弹窗
    handleClose()
  } catch (error) {
    console.error(error)
    ElMessage.error('操作失败')
  }
}

defineExpose({
  handleOpen, // 控制打开弹窗
  handleClose, // 控制关闭弹窗
  formData, // 表单数据
})
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: center;
}

//:deep(.n-image-preview-wrapper) {
//  z-index: 3000 !important;
//}

:deep(.el-dialog__body) {
  max-height: 550px;
  overflow-y: auto;
  overflow-x: hidden;
  /* 滚动条优化 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #c1c1c1 transparent;
}

/* Webkit 浏览器 */
:deep(.el-dialog__body::-webkit-scrollbar) {
  width: 6px;
}

:deep(.el-dialog__body::-webkit-scrollbar-track) {
  background: transparent;
  border-radius: 4px;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb) {
  background-color: #c1c1c1;
  border-radius: 4px;
  transition: background-color 0.3s;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb:hover) {
  background-color: #a8a8a8;
}
</style>
